// 入口组件
import { useRoutes } from "react-router-dom"
import { Footer } from "./compnents/Footer"
import { Header } from "./compnents/Header"
import { routerConfig } from "./router/routerConfing"
import { LoginForm } from "./compnents/LoginForm"
import { useEffect, useState } from "react"
import { reqGetUserById, reqWhoAmI } from "./api/user"
import { useDispatch } from "react-redux"
import { changeLoginState, initUser } from "./store/userSlice"
export default function App() {
  const dispatch = useDispatch()
  const checkLogin = async () => {
    const token = localStorage.getItem("token")
    if (!token) {
      return
    }
    const { code, data } = await reqWhoAmI()
    if (code !== 0) {
      // 过期了
    } else {
      const { data: user } = await reqGetUserById(data._id)
      dispatch(changeLoginState(true))
      dispatch(initUser(user))
    }
  }
  useEffect(() => {
    checkLogin()
  }, [])
  const [isShow, setIsShow] = useState(false)
  const openShow = () => {
    setIsShow(true)
  }
  const closeShow = () => {
    setIsShow(false)
  }
  return (
    <div className="root">
      {/* Header */}
      <Header open={openShow}></Header>
      {/* Body */}
      <div className="content">
        {
          useRoutes(routerConfig)
          // router-view
          /* <Routes>
              <Route path  element ></Route>
            <Routes> */
        }
      </div>
      {/* Footer */}
      <Footer></Footer>
      {/* 弹窗 */}
      <LoginForm isShow={isShow} close={closeShow}></LoginForm>
    </div>
  )
}
